<template>
  <page-header-wrapper>
    <a-card v-if="!loading">
      <a-tabs type="card" v-model="page">
        <a-tab-pane key="1" tab="项目简介">
          <ProjectBrief @submit=";(page = '2'), (pages = '2')" :data="data" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="客户资料" :disabled="show && pages < '2'">
          <Customer v-if="page == '2'" @submit=";(page = '3'), (pages = '3')" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="建筑商" :disabled="show && pages < '3'">
          <Builder v-if="page == '3'" @submit=";(page = '4'), (pages = '4')" />
        </a-tab-pane>
        <a-tab-pane key="4" tab="贷款资料" :disabled="show && pages < '4'">
          <Loan v-if="page == '4'" @submit=";(page = '5'), (pages = '5')" />
        </a-tab-pane>
        <a-tab-pane key="5" tab="项目建筑信息" :disabled="show && pages < '5'">
          <ProjectBuilding v-if="page == '5'" @submit=";(page = '6'), (pages = '6')" />
        </a-tab-pane>
        <a-tab-pane key="6" tab="文件" :disabled="show && pages < '5'">
          <UploadFile />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getProjectById } from '@/api/common'
import ProjectBrief from './ProjectBrief.vue'
import Customer from './Customer.vue'
import Builder from './Builder.vue'
import Loan from './Loan.vue'
import ProjectBuilding from './ProjectBuilding.vue'
import UploadFile from './UploadFile.vue'
export default {
  data() {
    return {
      name: 'Detail',
      page: '1',
      pages: '1',
      loading: true,
      show: true,
      data: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      this.loading = true
      const id = this.$route.query.id
      if (id) {
        const res = await getProjectById(id)
        this.data = res.result.data
        // console.log(this.data)
        this.pages = String(res.result.data.projectStage)
        // console.log(this.pages)
        this.page = String(res.result.data.projectStage > 5 ? 1 : res.result.data.projectStage)
        if (res.result.data.projectStage > 5) {
          this.show = false
        }
        this.loading = false
      } else {
        this.loading = false
      }
    }
  },
  watch: {
    page(v) {
      let id = this.$route.query.id
      if (!id) {
        this.page = '1'
      }
    }
  },
  components: {
    ProjectBrief,
    Customer,
    Builder,
    Loan,
    ProjectBuilding,
    UploadFile
  }
}
</script>
<style>
.ant-tabs {
  overflow: unset;
}
.card-container {
  background: #f5f5f5;
  /* overflow: hidden; */
  padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}

.add {
  float: right;
  margin-bottom: 10px;
  margin-right: 20px;
}
</style>
